<template>
  <div>
    <div class="table-data" v-show="tabShow">
      <div class="search-box">
        <el-input size="small" v-model="title" placeholder="商品名称"></el-input>
        <el-select clearable  v-model="commoditytype" placeholder="全部商品类型">
          <el-option v-for="(item,typekey) in querydata.type_arr" :key="typekey" :label="item" :value="typekey"></el-option>
        </el-select>
        <el-select clearable v-model="supplier" placeholder="全部供应商" v-if="manage=='admin'">
          <el-option v-for="item in vendor_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-select clearable v-model="business" placeholder="全部商家" v-if="manage=='admin'">
          <el-option v-for="item in shop_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-select clearable v-model="allStates" placeholder="全部状态">
          <el-option v-for="(item,index) in status_arr" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-cascader clearable v-model="classification" :options="category_list" :props="{ value: 'id', label: 'name'}" v-if="manage=='admin'" placeholder="全部分类" @change="handleChange"></el-cascader>
        <el-button size="small" type="primary" @click="handleSearch">搜索</el-button>
        <el-select clearable v-model="special" placeholder="京东" v-if="manage=='admin'">
          <el-option v-for="item in vendor_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-button size="small" type="primary" @click="handleSearch" v-if="manage=='admin'">拉取</el-button>
        <!-- <div class="add"> -->
          <el-button size="small" type="primary" @click="alltableData">全部商品</el-button>
          <el-button size="small" type="primary" v-if="manage!='channel'&& manage!='shop'" @click="handleAdd()"><i class="el-icon-plus"></i><span>新建商品</span></el-button>
        <!-- </div> -->
      </div>
      <el-tabs v-model="allStates" type="card" @tab-click="handleClick">
        <el-tab-pane v-for="(item,index) in status_arr" :key="index" :label="item.name" :name="item.id"></el-tab-pane>
      </el-tabs>
      <el-table 
      v-loading="loading"
      element-loading-text="正在加载"
      element-loading-spinner="el-icon-loading" :data="tableData" style="width:100%" :header-cell-style="headClass" :height="tHeight" class="table-box">

        <el-table-column label="id" width="70" prop="id"></el-table-column>
        <el-table-column label="唯一标识" v-if="manage=='admin'" width="130" prop="zh_sku"></el-table-column>
        <el-table-column label="商品名称" width="240">
            <template slot-scope="scope"> 
              <div class="commodity-name">
              <el-popover placement="right" title="" trigger="hover">
                  <img :src="scope.row.cover" style="max-width: 300px; max-height: 300px;"/>
                  <img slot="reference" class="commodity-image" :src="scope.row.cover" :alt="scope.row.cover">
              </el-popover>
              <p style="width: 300px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap" >{{scope.row.title}}</p>
              </div>
            </template>
            
        </el-table-column>
        <el-table-column label="商品类型" prop="type_txt" width="80"></el-table-column>
        <el-table-column label="供应商" v-if="manage=='admin'" width="120" prop="vendor_name"></el-table-column>
        <el-table-column label="商家" v-if="manage=='admin'" prop="shop_name" width="120"></el-table-column>
        <!-- <el-table-column label="原价" width="180" v-if="manage!='shop'">
          <template slot-scope="scope">
            <div v-if="scope.row.spec_list.length>0">
              <div v-for="item in scope.row.spec_list" :key="item.id">
                <label for="" style="font-weight: 600;">{{item.key_name}} / </label> {{item.original_price}} 
              </div>
            </div>
            <p v-else>{{scope.row.original_price}}</p>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="供应商/商家结算价" width="200" v-if="manage!='channel'">
          <template slot-scope="scope">
            <div v-if="manage=='admin'">
              <div v-if="scope.row.spec_list.length>0">
                <p v-for="item in scope.row.spec_list" :key="item.id"><span style="font-weight: 600;">{{item.key_name}} / </span>{{item.sell_price}}</p>
              </div>
              <p v-else>{{scope.row.sell_price}}</p>
            </div>
            <p v-if="manage=='shop'">{{scope.row.merchant_settle_price}}</p>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="渠道结算价" width="200" v-if="manage!='shop'">
          <template slot-scope="scope">
            <div v-if="scope.row.spec_list.length>0">
              <p v-for="item in scope.row.spec_list" :key="item.id"><span style="font-weight: 600;">{{item.key_name}} / </span>{{item.platform_price}}</p>
            </div>
            <p v-else>{{scope.row.platform_price}}</p>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="建议售价" width="200" v-if="manage!='shop'">
          <template slot-scope="scope">
            <div v-if="scope.row.spec_list.length>0">
              <p v-for="item in scope.row.spec_list" :key="item.id"><span style="font-weight: 600;">{{item.key_name}} / </span>{{item.price}}</p>
            </div>
            <p v-else>{{scope.row.price}}</p>
          </template>
        </el-table-column> -->
        <el-table-column label="成码数量" prop="create_ticket_num"></el-table-column>
        <!-- <el-table-column label="已售" width="200" v-if="manage!='shop'">
          <template slot-scope="scope">
            <div v-if="scope.row.spec_list.length>0">
              <p v-for="item in scope.row.spec_list" :key="item.id"> <span style="font-weight: 600;">{{item.key_name}} / </span>{{item.sale_stock}}</p>
            </div>
            <p v-else>{{scope.row.sale_stock}}</p>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="已售" v-else prop="spec_goods_price.sale_stock"></el-table-column> -->
        <!-- <el-table-column label="剩余" v-if="isManage ||ischannel">
          <template slot-scope="scope">
            <div v-if="scope.row.spec_list.length>0">
              <p v-for="item in scope.row.spec_list" :key="item.id">{{item.reset_stock}}</p>
            </div>
            <p v-else>{{scope.row.reset_stock}}</p>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="剩余" width="200" v-if="manage!='shop'">
          <template slot-scope="scope">
            <div v-if="scope.row.spec_list.length>0">
              <p v-for="item in scope.row.spec_list" :key="item.id"><span style="font-weight: 600;">{{item.key_name}} / </span>{{item.stock}}</p>
            </div>
            <p v-else>{{scope.row.stock}}</p>
          </template>
        </el-table-column> -->
        <el-table-column label="状态" prop="status_txt" width="70"></el-table-column>
        <el-table-column label="标签" prop="tags_txt" v-if="manage=='admin'" width="240"></el-table-column>
        <el-table-column label="分类" prop="category_txt" v-if="manage!='shop'"></el-table-column>
        <el-table-column label="售卖时间" width="180" v-if="manage!='shop'">
          <template slot-scope="scope">
            <p>{{scope.row.sale_on_time}} 到 {{scope.row.sale_off_time}}</p>
          </template>
        </el-table-column>
        <el-table-column label="制码类型" v-if="manage=='admin'" width="80">
          <template slot-scope="scope">
            <p v-if="scope.row.ticket_type==1">自建商品</p>
            <p v-if="scope.row.ticket_type==2">倒码商品</p>
            <p v-if="scope.row.ticket_type==3">制码商品</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" v-if="manage!=='channel'">
          <template slot-scope="scope">
            <button class="butt-min " @click="lookDetails(scope.row)">规格</button>
            <i v-if="manage=='admin'" >-</i>
            <router-link v-if="manage=='admin'" :to="{name:'goodsEdit',query:{id:scope.row.id}}" @click.native="handleEdit(scope.$index,scope.row)" class="link" size="mini">编辑</router-link>
            -
            <button class="butt-min"  @click="copyToClip(scope.row.id)">复制地址</button>
            <i v-if="manage=='admin'">-</i>
            <button v-if="manage=='admin'" @click="handleRemove(99,scope.row)" class="danger butt-min">删除</button>
            <i v-if="manage=='admin'">-</i>
            <button v-if="scope.row.status!=1&&manage=='admin'" @click="handleRemove(1,scope.row)" class="butt">上架</button>
            <button v-if="scope.row.status==1&&manage=='admin'" @click="handleRemove(2,scope.row)" class="butt">下架</button>
            <i v-if="(scope.row.ticket_type==2||scope.row.ticket_type==3)&&manage=='admin'">-</i>
            <button v-if="scope.row.ticket_type==2&&manage=='admin'" @click="handleImport(1,scope.row)" class="butt">导入核销码</button>
            <button v-if="scope.row.ticket_type==3&&manage=='admin'&&scope.row.status != 2" @click="handleImport(2,scope.row)" class="butt">导出核销码</button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="260" v-if="manage=='channel'">
          <template slot-scope="scope">
            <button class="butt-min" @click="lookDetails(scope.row)">查看规格</button>
            -
            <button class="butt-min" @click="copyToClip(scope.row.id)">复制地址</button>
            -
            <router-link :to="{name:'goodsDetail',query:{id:scope.row.id}}" @click.native="handleDetail(scope.$index,scope.row)" class="link">查看详情</router-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="pages" ref="page-box">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,30,50]"
        :page-size="size"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
      ></el-pagination>
      </div>
    </div>
    <div class="details-box" v-if="detailShow">
      <div class="details">
        <div class="details-tilte">{{shopTitle}}</div>
        <div class="details-box1">
          <el-table :data="spec_list" border style="width: 100%；" :height= "700">
            <el-table-column v-if="manage!='shop'"  prop="zh_sku" label="唯一标识"  width="180"></el-table-column>
            <el-table-column  prop="key_name" label="规格"  width="180"></el-table-column>
            <el-table-column prop="original_price" label="原价" v-if="manage!='shop'"></el-table-column>
            <el-table-column label="供应商/商家结算价" v-if="manage!='channel'">
              <template slot-scope="scope">
                <p v-if="manage=='admin'">{{scope.row.sell_price}}</p>
                <p v-if="manage=='shop'">{{scope.row.merchant_settle_price}}</p>
              </template>
            </el-table-column>
            <el-table-column prop="platform_price" label="渠道结算价" v-if="manage!='shop'"></el-table-column>
            <!-- <el-table-column prop="address" label="企业端结算价（二期）"></el-table-column> -->
            <el-table-column prop="suggest_price" label="建议售价" v-if="manage!='shop'">
              <template slot-scope="scope">
                <p>{{scope.row.suggest_price ? scope.row.suggest_price : scope.row.price}}</p>
              </template>
            </el-table-column>
            <el-table-column prop="sale_stock" label="已售"></el-table-column>
            <el-table-column prop="stock" label="剩余"></el-table-column>
        </el-table>
        </div>
        <div class="but-box">
          <el-button type="primary" @click="detailShow=false">关闭</el-button>
        </div>
      </div>
    </div>
    <router-view @loadData="loadData" :tabShow="tabShow"></router-view>
    <ImportDialog :isImport="isImport" :isExport="isExport" :key="timer" :allData="formData"  @closeDialog="closeDialog" @loadData="loadData"></ImportDialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";
import goodsApi from "@/api/goods";
import ImportDialog from "./ImportDialog.vue";
import bus from "@/api/busEvevt"
// import { State, Getter, Mutation, Action } from "vuex-class";
@Component({
  components: {ImportDialog}
})
export default class goodsList extends Vue {
  // @Getter("user") getUser: any;
  vendId:any = ''
  status_arr: any = [];//商品状态数据
  detailShow: boolean = false
  spec_list: any = [];//商品规格详情数据
  shopTitle: string = '';//商品名称
  @Provide() commodityid :any = [];//商品分类id
  @Provide() commoditytype: string = '';//商品类型
  @Provide() supplier: any = '';//供应商
  @Provide() business: string = '';//商家
  @Provide() allStates: string = '1';//全部状态
  @Provide() classification: string = '';//全部分类
  @Provide() special: string = '';//特殊：京东
  @Provide() state: string = "1"; // 状态默认值
  @Provide() timer: any = '';
  @Provide() title: any = '';//商品名称
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  @Provide() tableData: any = []; // 表格数据
  @Provide() querydata: any = {};//搜索数据
  @Provide() category_list:any = [];//商品多级分内
  @Provide() shop_list:any = [];//商家
  @Provide() vendor_list:any = [];//渠道商
  @Provide() page: number = 1; // 当前page
  @Provide() size: number = 10; // 请求数据的个数 默认5
  @Provide() total: number = 0; // 总数据条数
  @Provide() tabShow: Boolean = true; // 是显示否列表页面
  @Provide() loading: Boolean = true; // 是否显示加载图标
  @Prop({}) tabVisible!: any;
  @Provide() isExport: Boolean = false; // 是否展示导出弹窗
  @Provide() isImport: Boolean = false; // 是否展示导入弹窗
  @Watch("$route") handleRouteChange(to: any,form:any) {
    if(form.path!='/goodsList'){
      this.tabShow=this.tabVisible;
    }
  }
  @Provide() searchMaps:any = {}
  @Provide() searchMap:{
    id:any,
    status:any
  }={
    id:"",
    status:""
  }
  @Provide() formData: any = {};
  @Provide() manage: any = '';//管理员
  lookDetails(ent:any) {//商品详情
    console.log(ent)
    if(ent.spec_list.length!==0) {
      this.spec_list = ent.spec_list
    }else {
      this.spec_list = [{
        zh_sku : ent.zh_sku,
        key_name: ent.title,
        price: ent.price,
        original_price: ent.original_price,
        platform_price: ent.platform_price,
        suggest_price: ent.suggest_price,
        sale_stock: ent.sale_stock,
        merchant_settle_price: ent.merchant_settle_price,
        stock:ent.stock,
        sell_price:ent.sell_price
      }]
    }
    this.detailShow = true
    this.shopTitle = ent.title
  }
  //复制地址
  copyToClip(id) {
    let url = 'pages/commoditydetails/commoditydetails?id='+id
    this.$copyText(url)
      .then(()=>{
        this.$message({
          message: '复制成功',
          type: "success"
        });
      })
      .catch(()=>{})
  }
  headClass() {
    return "text-align: center;background:#eef1f6;";
  }
  // 新增
  handleAdd(){
    this.tabShow=false
    this.$router.push({
      path:'/goodsList/add'
    })
  }
  // 编辑
  handleEdit(index: number, row: any){
    this.tabShow=false
  }
  // 上下架删除
  handleRemove(index: number, row: any) {
    this.searchMap.id=row.id
    let a;
    if(index==1){
      this.searchMap.status=1
      a='确定要上架'
    }else if(index==2){
      this.searchMap.status=2
      a='确定要下架'
    }else{
      this.searchMap.status=99
      a='确定要删除'
    }
    this.$confirm(a+'该商品？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
       closeOnClickModal:false
    }).then(() => {
      goodsApi.removeGoods(this.searchMap)
      .then((res: any) => {
        if(res.data.code==200){
          this.$message({
            message: '操作成功',
            type: "success"
          });
          this.loadData();
        }
      });
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消'
      });          
    });
  }
  // 导入
  handleImport(index:number,row:any){
    console.log(row)
    this.formData=row
    this.isImport=true
    if(index==2){
      this.isExport=true
    }else{
      this.timer = new Date().getTime();
    }
  }
  // 渠道端商品详情
  handleDetail(){
    this.tabShow=false
  }
  // 关闭弹窗
  closeDialog() {
    this.isExport = false;
    this.isImport=false
  }
  mounted(){
    //接收兄弟传值
    bus.$on('mchId',(msg) => {
      this.searchMaps.mch_id = msg
    });
    bus.$on('vendId',(msg) => {
      this.vendId = msg
      this.searchMaps.vend_id = msg
    });
  }
  created() {
    if(this.$route.query.vend_id!=undefined) {
      this.supplier = this.$route.query.vend_id
    }else if(this.$route.query.mch_id!=undefined){
      this.searchMaps.mch_id = this.$route.query.mch_id
    }

    if(this.$route.path!='/goodsList'){
      this.tabShow=false
    }
    let manage:any = localStorage.getItem('manage');
    this.manage=JSON.parse(manage).type;

    this.loadData();
    if (this.manage == 'admin') {
      this.shopList();
      this.vendorList();
      this.categoryList();
    }
  }

  loadData() {
    // 判断管理员权限
    if(this.manage=='shop'){
      this.loading=true;
      this.Judgmentparameters();
      goodsApi.shopGoodsList(this.page,this.size,this.searchMaps)
      .then((res: any) => {
        this.querydata = res.data.data;
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
        this.loading=false
        this.status_arr = [];
        let status_arr:any = res.data.data.status_arr;
        for (let keys in status_arr) {
          this.status_arr.push({'id':keys,'name':status_arr[keys]})
        }
      });
    }else{
      setTimeout(() => {
        this.loading=true;
        this.Judgmentparameters();
        goodsApi.goodsList(this.page,this.size,this.searchMaps)
        .then((res: any) => {
          this.querydata = res.data.data
          this.tableData = res.data.data.goods_lists.data;
          this.total = res.data.data.goods_lists.total;
          this.loading=false
          this.status_arr = [];
          let status_arr:any = res.data.data.status_arr;
          for (let keys in status_arr) {
            this.status_arr.push({'id':keys,'name':status_arr[keys]})
          }
        });
      },500)
    }

  }

  shopList ():void {
    goodsApi.goodsShop().then((res: any) => {
      this.shop_list = res.data.data;
    });

  }

  vendorList ():void {
    goodsApi.goodsVendor().then((res: any) => {
       this.vendor_list = res.data.data;
    });
  }
  handleClick(tab, event) {
    this.handleSearch()
  }
  categoryList () {
    goodsApi.goodsCategory().then((res: any) => {
      this.category_list = [];
      let category:any = res.data.data;
      for(let key in category) {
        this.category_list.push(category[key])
      }
    });
  }

  //商品多级联动
  handleChange(value:number):void {
    this.commodityid = value
  }
  Judgmentparameters():void {
    let searchMaps: any = {}
    if(this.title!=='') {
      searchMaps.title = this.title
    }
    if(this.supplier!=='') {
      searchMaps.vend_id = this.supplier
    }
    if(this.business!=='') {
      searchMaps.shop_id = this.business
    }
    if(this.commoditytype!=='') {
      searchMaps.type = this.commoditytype
    }
    if(this.allStates!=='') {
      searchMaps.status = this.allStates
    }
    if(this.commodityid.length==1) {
      searchMaps.cate_id = this.commodityid[0]
    }
    if(this.commodityid.length==2) {
      searchMaps.sub_cate_id = this.commodityid[1]
    }
    if(this.commodityid.length==3) {
      searchMaps.third_sub_cate_id = this.commodityid[2]
    }
    if (this.searchMaps.mch_id) {
      searchMaps.mch_id = this.searchMaps.mch_id;
    }
    this.searchMaps = searchMaps
  }
  handleSizeChange(val: number): void {
    this.size = val;
    this.page = 1;
    this.loadData();
  }

  handleCurrentChange(val: number): void {
    this.page = val;
    this.loadData();
  }

  handleSearch(): void {
    // 点击搜索
    this.page= 1;
    this.loadData();
  }
  alltableData() {
    this.title = '' 
    this.supplier = ''
    this.business =''
    this.commoditytype =''
    this.classification = ''
    this.allStates = ''
    this.commodityid = []
    this.loadData()
  }
}
</script>

<style lang="scss" >
.el-date-editor{
  margin-right: 10px;
}
.el-button--small, .el-button--small.is-round {
  margin-right: 10px;
}
.add {
  margin-top: 8px;
 
}
.el-button--mini, .el-button--mini.is-round {
  margin: 5px;
}
.viewdetails {
  cursor: pointer;
  margin: 5px;
}
.viewdetails:hover {
  color: #409EFF;
}
.details-box {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0,0,0,0.4);
  z-index: 22;
  width: 100%;
  height: 100%;
  .details {
    width: 1200px;
    height: 800px;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -600px;
    margin-top: -400px;
    padding: 10px 30px;
    .details-tilte {
      padding: 10px 0;
      font-size: 24px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .details-box1 {
      height: 700px;
    }
    .but-box {
      text-align: center;
      margin-top: 10px;
    }
  }
}
.commodity-name{
      display:flex;
      flex-wrap: nowrap;
      padding: 6px;
      .commodity-image{
        width: 50px;
        height:50px;
      }
      p{
        margin:auto 10px;
      }
    }
.el-table .cell {
  text-align: center !important;
}
.el-tabs {
  background: #fff;
}
</style>
